<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人信息 - 北大跳蚤市场</title>
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.css">
    <link rel="stylesheet" href="/css/profile.css">
    <link rel="stylesheet" href="/components/navbar.css">
</head>

<body>
    <!-- 插入导航栏 -->
    <div id="navbar-container"></div>
    <!-- 导航栏 -->
    <!-- <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand fw-bold text-primary" href="/">
                <i class="bi bi-shop"></i> 校内跳蚤市场
            </a>
        </div>
    </nav> -->

    <!-- 个人信息主体 -->
    <div class="profile-container">
        <!-- 头部信息 -->
        <div class="profile-header">
            <img alt="头像" class="profile-avatar" id="avatar">
            <h4 id="nickname"></h4>
            <p class="mb-0" id="userEmail">test@pku.edu.cn</p>
        </div>

        <!-- 个人信息部分 -->
        <div class="profile-section">
            <h5 class="section-title">
                <i class="bi bi-person-badge"></i> 基本信息
            </h5>

            <!-- 自我描述 -->
            <div class="info-item">
                <span class="info-label">自我描述</span>
                <div class="info-content">
                    <span id="userDescText"></span>
                    <button class="btn-edit ms-2" id="editDescBtn">
                        <i class="bi bi-pencil"></i>
                    </button>
                </div>
            </div>
            <div id="descEditGroup" style="display: none;">
                <textarea id="descInput" class="edit-input" rows="3"></textarea>
                <div class="d-flex justify-content-end">
                    <button class="btn btn-sm btn-outline-secondary me-2" id="cancelDescBtn">取消</button>
                    <button class="btn btn-sm btn-primary" id="saveDescBtn">保存</button>
                </div>
            </div>

            <!-- 交易地址 -->
            <div class="info-item">
                <span class="info-label">常用交易地址</span>
                <div class="info-content">
                    <span id="addressText"></span>
                    <button class="btn-edit ms-2" id="editAddressBtn">
                        <i class="bi bi-pencil"></i>
                    </button>
                </div>
            </div>
            <div id="addressEditGroup" style="display: none;">
                <input type="text" id="addressInput" class="edit-input" placeholder="请输入常用交易地址">
                <div class="d-flex justify-content-end">
                    <button class="btn btn-sm btn-outline-secondary me-2" id="cancelAddressBtn">取消</button>
                    <button class="btn btn-sm btn-primary" id="saveAddressBtn">保存</button>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="profile-section text-center">
            <button class="btn btn-primary-custom mb-2" id="changeAvatarBtn">
                <i class="bi bi-camera me-2"></i>更换头像
            </button>
            <input type="file" id="avatarUpload" accept="image/*" class="d-none">

            <button class="btn btn-primary-custom w-100 mt-3" id="publishBtn">
                <i class="bi bi-plus-circle me-2"></i>发布新商品
            </button>
        </div>
    </div>

    <!-- Bootstrap & 图标库 -->
    <script src="/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/profile.js"></script>
    <!-- 动态加载导航栏 -->
    <script>
        $(function () {
            $("#navbar-container").load("/components/navbar.html");
        });
    </script>

</body>

</html>